<template>
  <article>
    <h6>消息模版说明：</h6>
    <br/>
    <p>消息模版就是一段包含占位符的字符串，</p>
    <p>发送消息时，程序会用具体的数值，替换这些占位符；</p>
    <p>例如：“尊敬的${name}”，程序会进行处理，客户看到的就是 “尊敬的小明”。</p>
    <br/>
    <p>当前模版可使用的占位符如下：</p>
    <ul>
      <li v-for="(item, idx) in properties" :key="idx">{{ item.label }}：${<span>{{ item.name }}</span>}</li>
    </ul>
  </article>
</template>

<script>
export default {
    name: "PropsPanel"
    , props: {
        // 作业ID
        guid: {type: String, default: undefined}
    }, data() {
        return {
            properties: [
                {name: 'customer_name', label: '客户名称', value: '', require: true}
                , {name: 'loan_account', label: '贷款账号', value: '', require: true}
                , {name: 'code', label: '验证码', value: '', require: true}
            ]
        }
    }, watch: {
        guid: {
            handler: function (val) {
                this.reload(val);
            }
        }
    }, methods: {
        /**
         * 重新加载数据
         *
         * @param id 查询参数
         */
        reload: function (id) {
            this.$layers.ajax({
                url: '/sys/msg/props/list',
                method: 'GET',
                params: {msgId: id}
            }).then((result) => {
                if (result.code === 0) {
                    this.properties = result.data;
                }
            });
        }
    }
}
</script>

<style scoped>

</style>